<template>
  <div class="details" v-if="bookData">
    <div class="search">
      <div class="log" @click="back">
        <img src="../../public/images/img/arrow_left.png" alt="" />
      </div>
      <div class="sear">
        <ul>
          <li class="con">商品</li>
          <li>详情</li>
          <li>评论</li>
          <li>推荐</li>
        </ul>
      </div>
      <div class="cai">
        <img src="../../public/images/img/menu.png" alt="" />
      </div>
    </div>

    <main>
      <section>
        <div class="lbt">
          <div class="read">
            <router-link to="/reading">在线试读</router-link>
          </div>
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            indicator-color="#FF463C"
          >
            <van-swipe-item v-for="item in bookData.img" :key="item">
              <img :src="item" alt="" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </section>
      <div class="detail">
        <div class="article">{{ bookData.name }}</div>
        <span class="product">{{ bookData.productSubname }}</span>
        <div class="price">
          <div class="price-left">
            <span>￥</span>
            <span>{{ bookData.money.toFixed(2) }}</span>
            <span
              >({{
                ((bookData.money / bookData.originalPrice) * 10).toFixed(2)
              }}折)</span
            >
          </div>
          <div class="price-right">
            <i class="iconfont icon-daifukuan"></i>
            <span>降价通知</span>
          </div>
          <div class="E_books">
            <span>电子书</span>￥{{ bookData.ebookPrice }}
          </div>
        </div>
        <div class="dingjia">
          <span>定价</span><del>￥{{ bookData.originalPrice }}</del>
        </div>
        <div class="product_icons">
          <div
            class="labels"
            v-for="(value, index) in bookData.labels"
            :key="index"
          >
            {{ value.label_common }}
          </div>
        </div>
      </div>

      <div class="book_community">
        <div class="left">
          <div class="stars_div">
            <span class="score">{{ bookData.score }}</span>
            <div class="stars f_left">
              <span
                class="red"
                v-for="index in parseInt(bookData.score / 2)"
                :key="index"
              ></span>
            </div>
          </div>

          <div class="p_num">
            {{ bookData.pNum }}人评分<span class="p_message"
              >精彩评分送积分</span
            >
          </div>
        </div>

        <div class="right">
          <div class="j_write_score score_btn">我要写评论</div>
        </div>
      </div>

      <div class="fixed_icons">
        <a href="#"></a>
      </div>

      <div class="jump">
        <div class="arrow_con">
          <div class="linkto_name">作者</div>
          <div class="linkto_value">{{ bookData.author }}</div>
          <div class="linkto_look">查看作品</div>
          <span class="iconfont icon-jiantou"></span>
        </div>
        <div class="arrow_con">
          <div class="linkto_name">出版</div>
          <div class="linkto_value">{{ bookData.publishingHouse }}</div>
          <div class="linkto_look">查看作品</div>
          <span class="iconfont icon-jiantou"></span>
        </div>
        <div class="arrow_con">
          <div class="linkto_name">排名</div>
          <div class="linkto_value">{{ bookData.bang_rank }}</div>
          <div class="linkto_look">查看作品</div>
          <span class="iconfont icon-jiantou"></span>
        </div>
        <div class="arrow_con">
          <div class="linkto_name">分类</div>
          <div class="linkto_value">{{ bookData.categoryText }}</div>
          <span class="iconfont icon-jiantou"></span>
        </div>
      </div>

      <div class="relation_option">
        <div class="arrow_con title">
          已选
          <div class="name">{{ bookData.name }}</div>
        </div>

        <div class="thumbnail">
          <div class="img">
            <img :src="bookData.img[0]" alt="" />
          </div>

          <div class="dd">
            <div class="price">{{ (bookData.money * num).toFixed(2) }}</div>
            <div class="select">
              已选
              <div class="name">{{ bookData.name }}</div>
            </div>
          </div>

          <div class="quantity">
            <div class="txt">数量：</div>
            <div class="nums">
              <div @click="sub" class="add iconfont icon-jianshao"></div>
              <div class="num">{{ num }}</div>
              <div @click="add" class="sub iconfont icon-zengjia"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="relation_option">
        <div class="arrow_con">
          <span>图文详情</span>
          <span class="iconfont icon-jiantou"></span>
        </div>
      </div>

      <div class="relation_option">
        <div class="arrow_con">
          <div class="arrow">
            更多卖家
            <span
              ><i>{{ bookData.arrow }}</i
              >个卖家在售</span
            >
          </div>
          <span class="iconfont icon-jiantou"></span>
        </div>
      </div>

      <div class="shopping_cart">
        <div class="left">
          <a class="item">
            <img src="../../public/images/商品详情图片/icon_shop.png" alt="" />
            店铺
          </a>
          <a class="item" @click="setFavorites">
            <img
              v-show="!favorites"
              src="../../public/images/商品详情图片/fav.png"
              alt=""
            />
            <img
              v-show="favorites"
              src="../../public/images/商品详情图片/fav_on.png"
              alt=""
            />
            收藏
          </a>
          <router-link to="/shoppingcart" class="item">
            <img
              src="../../public/images/商品详情图片/icon_shoppingcart.png"
              alt=""
            />
            购物车
            <em v-show="getNum">{{ getNum }}</em>
          </router-link>
        </div>
        <div class="btn_con">
          <button class="buy" @click="setaddGoods">立即购买</button>
          <button class="add" @click="addGoods">加入购物车</button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { getHomepageBall } from "../api/home";

export default {
  data() {
    return {
      bookData: null,
      editData: null,
      editId: null,
      num: 1,
      goodsArray: [],
      flag: false,
      favoritesFlag: false,
      goodsDataNum: 0,
      favorites: false,
      favoritesArray: [],
    };
  },

  computed: {
    getNum: function () {
      return this.goodsDataNum.length;
    },
  },

  methods: {
    getHomepageBallFun() {
      getHomepageBall().then((data) => {
        if (this.editData==2) {
          
          this.bookData = data.newBooksData[this.editId];
        }else if (this.editData==1) {
          this.bookData = data.booksData[this.editId];
          
        }
        // console.log(this.bookData);
      });
    },
    getGoodsDataNum() {
      if (localStorage.getItem("goodsData")) {
        this.goodsDataNum = JSON.parse(localStorage.getItem("goodsData"));
      }
    },
    getEdit() {
      this.editData = this.$route.query.data;
      this.editId = this.$route.query.id - 1;
    },
    //添加购物车
    addGoods() {
      //JSON.stringify(data) 对象转字符串
      //JSON.parse(data)  根据json转对象

      this.goodsArray = []; //先清空

      //创建新数据
      let goodsData = {
        type: "图书",
        num: this.num,
        goodsID:+new Date(),
        checked: true,
        edit: false,
        ...this.bookData,
      };
      //获取浏览器旧订单数据
      if (localStorage.getItem("goodsData")) {
        this.flag = true;
        let goodsDataOld = JSON.parse(localStorage.getItem("goodsData"));

        //旧数据存起来
        this.goodsArray = goodsDataOld;

        this.goodsArray.forEach((item, index) => {
          //如果有重复订单，那就添加数量
          if (item.name == goodsData.name) {
            this.goodsArray[index].num += goodsData.num;
            //然后关闭添加
            this.flag = false;
          }
        });
      } else {
        // console.log(1);
        //首次添加
        this.goodsArray.unshift(goodsData);
      }
      if (this.flag) {
        //把旧数据和新数据放到一起
        this.goodsArray.unshift(goodsData);
      }
      //重新把数据添加到浏览器
      window.localStorage.setItem("goodsData", JSON.stringify(this.goodsArray));
      // console.log(JSON.parse(localStorage.getItem("goodsData")));
      this.getGoodsDataNum();
    },
    setaddGoods() {
      //JSON.stringify(data) 对象转字符串
      //JSON.parse(data)  根据json转对象

      this.goodsArray = []; //先清空

      //创建新数据
      let goodsData = {
        type: "图书",
        num: this.num,
        goodsID:+new Date(),
        checked: true,
        edit: false,
        ...this.bookData,
      };
      //获取浏览器旧订单数据
      if (localStorage.getItem("goodsData")) {
        this.flag = true;
        let goodsDataOld = JSON.parse(localStorage.getItem("goodsData"));

        //旧数据存起来
        this.goodsArray = goodsDataOld;

        this.goodsArray.forEach((item, index) => {
          //如果有重复订单，那就添加数量
          if (item.name == goodsData.name) {
            this.goodsArray[index].num += goodsData.num;
            //然后关闭添加
            this.flag = false;
          }
        });
      } else {
        // console.log(1);
        //首次添加
        this.goodsArray.unshift(goodsData);
      }
      if (this.flag) {
        //把旧数据和新数据放到一起
        this.goodsArray.unshift(goodsData);
      }
      //重新把数据添加到浏览器
      window.localStorage.setItem("goodsData", JSON.stringify(this.goodsArray));
      // console.log(JSON.parse(localStorage.getItem("goodsData")));
      this.getGoodsDataNum();
      this.$router.push("/ordersettlement");
    },
    //收藏
    setFavorites() {
      this.favoritesArray = [];

      let favoritesData = {
        id: this.editId,/*  */
        favorites: true,
      };

      if (localStorage.getItem("favoritesArray")) {
        this.favoritesFlag = true;
        let favoritesArrayOld = JSON.parse(
          localStorage.getItem("favoritesArray")
        );
        this.favoritesArray = favoritesArrayOld;
        this.favoritesArray.forEach((item) => {
          if (item.id == this.editId) {
            console.log(1);
            item.favorites = !item.favorites;
            this.favoritesFlag = false;
            
          } 
        });
      } else {
        console.log(2);
        this.favoritesArray.push(favoritesData);
      }

      if (this.favoritesFlag) {
        //把旧数据和新数据放到一起
        this.favoritesArray.unshift(favoritesData);
      }
  console.log(this.favoritesArray);
      window.localStorage.setItem(
        "favoritesArray",
        JSON.stringify(this.favoritesArray)
      );

      this.getFavorites();
    },

    getFavorites() {
      if (
        localStorage.getItem("favoritesArray") &&
        (JSON.parse(localStorage.getItem("favoritesArray")).length != 0)
      ) {
        let favoritesArrayOld = JSON.parse(
          localStorage.getItem("favoritesArray")
        );

        favoritesArrayOld.forEach((item) => {
          if (item.id == this.editId) {
            this.favorites = item.favorites;
          } 
        });
      } else {
        this.favorites = false;
      }

      console.log(this.favorites);
    },
    //数量加减
    add() {
      this.num++;
    },
    sub() {
      if (this.num > 1) {
        this.num--;
      }
    },
    //返回路由
    back() {
      this.$router.back();
    },
  },

  created() {
    this.getEdit();
    this.getHomepageBallFun();
    this.getGoodsDataNum();
    this.getFavorites();
  },
};
</script>

<style lang="scss" scoped>
.details {
  background-color: #eee;
  padding-bottom: 50px;
  .search {
    background-color: #fff;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    box-sizing: border-box;
    position: sticky;
    z-index: 3;
    top: 0;
    left: 0;
    .log {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 10px;
        height: 17px;
      }
    }
    .cai {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 21px;
        height: 7px;
      }
    }
    .sear {
      height: 100%;
      flex: 1;
      ul {
        margin: 0 32px;
        display: flex;
        justify-content: space-between;
        li {
          height: 44px;
          color: #3c3c3c;
          line-height: 44px;
          margin: 0 7px;
          text-align: center;
          padding: 0 3px;
          font-size: 17px;
          box-sizing: border-box;
          border-bottom: 3px solid transparent;
          &.con {
            color: #ff8161;
            border-bottom: 3px solid rgb(255, 129, 97);
          }
        }
      }
    }
  }
  .appdw {
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
  }
  .lbt {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #dddddd;
    .my-swipe .van-swipe-item {
      width: 375px;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
      img {
        width: 100%;
        display: block;
      }
    }
    .read {
      height: 30px;
      padding: 0 8px;
      background-color: white;
      border: 1px solid rgb(255, 129, 97);
      border-right: 0;
      border-radius: 16px 0 0 16px;
      line-height: 30px;
      text-align: center;
      font-size: 15px;
      position: absolute;
      z-index: 2;
      bottom: 20px;
      right: 0;
      a {
        color: rgb(255, 129, 97);
      }
    }
    .dot {
      position: absolute;
      bottom: 0px;
      left: 0;
      text-align: center;
      width: 100%;
      z-index: 2;
      display: flex;
      justify-content: center;
      ol {
        display: block;
        li {
          float: left;
          margin: 15px 5px 15px 0;
          width: 6px;
          height: 6px;
          background-color: #ccc;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          font-size: 0;
          line-height: 0;
          &.con {
            background-color: #ff463c;
          }
        }
      }
    }
  }
  .detail {
    padding-top: 6px;
    background-color: #fff;
    padding-bottom: 12px;
    margin-bottom: 5px;
    .article {
      margin: 5px 10px 4px;
      font-size: 16px;
      color: #4d525d;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      word-break: break-all;
      background-image: url(../../public/images/商品详情图片/icon_zy.png);
      background-position: 2px 2px;
      background-repeat: no-repeat;
      background-size: 49px 16px;
      text-indent: 56px;
    }
    .product {
      color: #969696;
      font-size: 12px;
      margin: 5px 10px 4px;
      display: block;
    }
    .price {
      margin-left: 10px;
      margin-right: 10px;
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
      .price-left {
        display: flex;
        align-items: flex-end;
        span {
          margin-bottom: 3px;
          &:nth-child(1) {
            font-size: 12px;
            color: #ff463c;
          }
          &:nth-child(2) {
            font-size: 20px;
            line-height: 1;
            color: #ff463c;
          }
          &:nth-child(3) {
            font-size: 12px;
            margin-left: 3px;
            color: #969696;
          }
        }
      }
      .price-right {
        margin-left: 10px;
        border: 1px solid #222222;
        border-radius: 12px;
        line-height: 1;
        display: flex;

        align-items: center;
        padding: 2px 4px;
        i {
          font-size: 18px;
        }
        span {
          font-size: 12px;
        }
      }
      .E_books {
        font-size: 13px;
        color: #ff8161;
        padding-left: 10px;
        border-left: 1px solid #ddd;
        margin-top: 5px;
        text-align: end;
      }
    }
    .product_icons {
      display: flex;
      margin: 0 10px;
      .labels {
        border: 1px solid #f2303c;
        color: #f2303c;
        padding: 0 2px;
        border-radius: 3px;
        font-size: 12px;
        margin: 10px 4px 0 0;
      }
    }
    .dingjia {
      margin-left: 10px;
      padding-top: 6px;
      color: #969696;
      span {
        font-size: 13px;
      }
      del {
        font-size: 12px;
      }
    }
  }
  .jump {
    background-color: #fff;
    margin-bottom: 5px;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    .arrow_con {
      padding: 10px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dfdfdf;
      margin: 0 10px;
      &:last-of-type {
        border: none;
      }
      .linkto_name {
        width: 60px;
        height: 24px;
        font-size: 14px;
        color: #969696;
        padding-left: 7px;
        line-height: 24px;
      }
      .linkto_value {
        height: 24px;
        color: #4d525d;
        flex: 1;
        font-size: 14px;
        line-height: 24px;
      }
      .linkto_look {
        width: 71px;
        height: 24px;
        line-height: 24px;
        color: #969696;
        text-align: center;
        font-size: 13px;
      }
      span {
        font-weight: 700;
        font-size: 14px;
        color: #6b6f78;
      }
    }
  }
  .relation_option {
    margin-bottom: 5px;
    border-top: 1px solid #ddd;
    background-color: #fff;
    .arrow_con {
      border-bottom: 1px solid #ddd;
      padding: 10px;
      line-height: 24px;
      font-size: 14px;
      color: #4d525d;
      display: flex;
      justify-content: space-between;
      .name {
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;

        height: 24px;
        flex: 1;
        margin-left: 5px;
      }
      .icon-jiantou {
        font-weight: 700;
      }
      .arrow {
        span {
          margin-left: 5px;
          i {
            color: #ff8161;
          }
        }
      }
    }
    .thumbnail {
      display: flex;
      color: #000;
      margin: 10px 10px 0;
      padding-bottom: 10px;
      align-items: center;
      .quantity {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;
        .nums {
          display: flex;
          height: 28px;
          .num {
            color: #ff8161;
            font-size: 18px;
          }
          align-items: center;
          .add,
          .sub {
            text-align: center;
            color: #ff8161;
            width: 35px;
            font-size: 24px;
          }
        }
        .txt {
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          color: #4d525d;
        }
      }
      .img {
        width: 50px;
        height: 50px;
        border: 1px solid #e5e5e5;
        img {
          width: 100%;
          display: block;
        }
      }
      .dd {
        margin-left: 10px;
        .price {
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          color: #ff8161;
        }
        .select {
          display: flex;
          font-size: 12px;
          .name {
            width: 85px;
            height: 15px;
            text-overflow: ellipsis;
            overflow: hidden;
            padding: 0 5px;
          }
        }
      }
    }
  }
  .book_community {
    margin-bottom: 5px;
    background-color: #fff;
    padding: 9px 10px;
    display: flex;
    justify-content: space-between;
    .left {
      .stars_div {
        display: flex;
        padding-bottom: 2.5px;
        .score {
          font-size: 15px;
          font-weight: 700;
          margin-right: 3.5px;
          color: #ff8161;
        }
        .stars {
          display: flex;
          .red {
            width: 15px;
            margin-right: 3.5px;
            height: 14px;
            background: url("../../public/images/图书榜图片/red_star.png")
              no-repeat;
            background-size: 16px 15px;
          }
        }
      }
      .p_num {
        padding-top: 4px;
        font-size: 12px;
        color: #b4b4b4;
      }
    }
    .right {
      padding-top: 4px;
      .j_write_score {
        border: 1px solid #ff8161;
        height: 26px;
        font-size: 12px;
        padding: 0 4px;
        border-radius: 4px;
        line-height: 26px;
        background-color: #fff2ef;
        color: #ff8161;
      }
    }
  }

  .fixed_icons {
    display: block;
    position: fixed;
    z-index: 12;
    bottom: 65px;
    right: 10px;
    a {
      display: block;
      width: 45px;
      height: 45px;
      background: url(../../public/images/商品详情图片/robot_2.png) center
        center no-repeat;
      background-size: contain;
      overflow: hidden;
    }
  }
  .shopping_cart {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 51px;
    width: 100%;
    border-top: 1px solid rgba(229, 229, 229, 0.93);
    background-color: rgb(255, 255, 255);
    z-index: 2;
    display: flex;
    .left {
      width: 42%;
      display: flex;
      .item {
        width: 33%;
        height: 51px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        position: relative;
        img {
          width: 20px;
          margin-bottom: 1.5px;
          height: 20px;
        }
        em {
          position: absolute;
          top: 2px;
          right: 8px;
          width: 16px;
          height: 16px;
          background-color: #fe435d;
          color: #fff;
          text-align: center;
          line-height: 16px;
          border-radius: 50%;
        }
      }
    }
    .btn_con {
      width: 58%;
      display: flex;
      .buy {
        width: 50%;
        color: #fff;
        font-size: 15px;
        height: 100%;
        background-color: rgb(255, 190, 35);
        border: none;
      }
      .add {
        border: none;
        color: #fff;
        font-size: 15px;
        width: 50%;
        height: 100%;
        background-color: rgb(243, 85, 75);
      }
    }
  }
}
</style>